<!--
 * @Description: 统一登录页面，不依赖第三方UI框架
-->
<template>
  <div class="base-login" :style="`background-image: url(${backgroundImage});`">
    <!-- 用于监听背景图加载完成 -->
    <img width="0" height="0" :src="backgroundImage" alt="" @load="loadedImg" />

    <div class="center-box">
      <!-- 左边标语 -->
      <div class="left-slogan">
        <transition name="slogan">
          <div v-show="mounted">
            <div>{{ sloganTop }}</div>
            <div class="slogan-txt">
              {{ sloganBottom }}
            </div>
          </div>
        </transition>
      </div>

      <!-- 右边登录框 -->
      <transition name="login">
        <div class="right-login" v-show="mounted">
          <img class="logo" :src="logo" v-if="logo" />
          <div class="logo" v-else>欢迎登录</div>
          <div class="input-box">
            <!-- 账号 -->
            <div class="input-box-item">
              <img
                class="input-icon"
                src="./img/icon-username.png"
              />
              <input
                class="input"
                v-model="formData.username"
                :class="{ loginLoading: loginLoading }"
                :disabled="loginLoading"
                placeholder="用户名"
                type="text"
                maxlength="20"
                name="username"
                @keyup.enter="handleLogin"
              />
            </div>

            <!-- 密码 -->
            <div class="input-box-item">
              <img
                class="input-icon"
                src="./img/icon-password.png"
              />
              <input
                v-model="formData.password"
                :disabled="loginLoading"
                :class="{ loginLoading: loginLoading }"
                maxlength="20"
                class="input"
                placeholder="密码"
                type="password"
                name="password"
                @keyup.enter="handleLogin"
              />
            </div>

            <!-- 验证码 -->
            <!-- <div class="input-box-item">
              <img
                class="input-icon"
                src="https://mj-web-2021.oss-cn-beijing.aliyuncs.com/mj-login/verify_icon.png?versionId=CAEQDhiBgID5_b6g1RciIGQzOGU5Nzg1MTdkMjQyMjk5ODkzOTVmODRkNzI3ZDVm"
              />
              <input
                class="input"
                v-model="formData.imageCode"
                :class="{ loginLoading: loginLoading }"
                :disabled="loginLoading"
                maxlength="4"
                placeholder="验证码"
                type="text"
                name="verify"
                @keyup.enter="handleLogin"
              />

              <img
                @click="renderVerifyCode"
                class="verify-img"
                :src="veryfyImg"
                alt="点击刷新"
              />
            </div> -->

            <!-- 提交 -->
            <button @click="handleLogin" class="submit">
              {{ loginLoading ? '登录中' : '登录' }}
            </button>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { useUserStore } from 'jax-node'
import bg from './img/yunying_bg.png'

const userStore = useUserStore()
const route = useRoute()
const env = import.meta.env

const loginLoading = ref(false)
const formRef = ref()
const formData = reactive({
  username: null,
  password: null,
  code: null,
})
const mounted = ref(false)

const sloganTop = route.meta.sloganTop || '欢迎来到'
const sloganBottom = env.VITE_APP_TITLE || route.meta.sloganBottom || '众联工作流'
const backgroundImage =
  route.meta.backgroundImage || bg
// const logo = route.meta.logo || 'https://mj-web-2021.oss-cn-beijing.aliyuncs.com/mj-login/login_icon.png'
const logo = route.meta.logo

const handleLogin = () => {
  if (!formData.username) return ElMessage.warning('请输入用户名')
  if (!formData.password) return ElMessage.warning('请输入密码')

  loginLoading.value = true
  userStore.login(formData).finally(res => {
    loginLoading.value = false
  })
}

/**
 * 背景图加载完成
 */
const loadedImg = () => {
  console.log('loadedImg')
  setTimeout(() => {
    mounted.value = true
  }, 100)
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.base-login {
  width: 100%;
  height: 100vh;
  background-color: #005884;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  .message-window-box {
    position: fixed;
    top: 0;
    width: 300px;
    z-index: 10000;
    .msg-item {
      margin-top: 20px;
      width: 300px;
      padding: 10px 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      transition: all 0.3s;
      font-size: 16px;
      line-height: 1.2;
      background-color: #fff;
      &.error {
        color: #f56c6c;
      }
      &.success {
        color: #29c24f;
      }
    }
  }
  .center-box {
    transform: scale(0.8);
    height: 710px;
    width: 1572px;
    min-width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .left-slogan {
      padding-top: 212px;
      color: #ffffff;
      font-size: 84px;
      font-weight: bold;
      line-height: 1;
      letter-spacing: 2px;
      .slogan-txt {
        margin-top: 65px;
        transition-delay: 0.5s;
      }
    }
    .right-login {
      width: 520px;
      height: 710px;
      background: linear-gradient(136deg, rgba(191, 191, 191, 0.25) 0%, rgba(255, 255, 255, 0.38) 100%);
      border-radius: 20px;
      backdrop-filter: blur(13px);
      .logo {
        text-align: center;
        margin: 75px auto;
        height: 125px;
        display: block;
        color: #fff;
        font-size: 50px;
      }
      .input-box {
        padding: 0 60px;
        .input-box-item {
          & + .input-box-item {
            margin-top: 14px;
          }
          height: 76px;
          border-bottom: 2px solid #ffffff;
          display: flex;
          flex-direction: row;
          align-items: center;
          .input-icon {
            width: 36px;
            height: 36px;
          }
          .input {
            width: 100%;
            height: 100%;
            font-size: 26px;
            background-color: transparent;
            outline: none;
            border: none;
            padding-left: 18px;
            color: #ffffff;
            user-select: text;
            &::placeholder {
              color: rgba(255, 255, 255, 0.5);
            }
            &.loginLoading {
              cursor: not-allowed;
            }
          }
          .verify-img {
            width: 100px;
            height: 80%;
            cursor: pointer;
          }
        }
        .submit {
          margin-top: 77px;
          width: 400px;
          height: 70px;
          background: #ffffff;
          border-radius: 10px;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #000000;
          border: none;
          cursor: pointer;
          transition: 0.3s;
          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }

  // 动画

  // 消息
  .message-enter-active,
  .message-leave-active {
    position: absolute;
    transition: all 0.3s;
  }
  .message-enter,
  .message-enter-from,
  .message-leave-to {
    transform: translateY(-10px);
    opacity: 0;
  }

  // 标语
  .slogan-enter-active,
  .slogan-leave-active {
    position: absolute;
    transition: all 0.7s;
  }
  .slogan-enter,
  .slogan-enter-from,
  .slogan-leave-to {
    transform: translateX(-50px);
    opacity: 0;
  }

  // 登录框
  .login-enter-active,
  .login-leave-active {
    transition: all 0.7s;
  }
  .login-enter,
  .login-enter-from,
  .login-leave-to {
    transform: translateX(50px);
    opacity: 0;
  }
}
</style>
